<div class="monitor-tab-div">
	<!-- 基本信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>基本信息</span>
		</div>
		<div class="m-panel-body base-info-div">
			<form class="bs-example form-horizontal xs-form">
	            <div id="base_info_monitor_div">
	                <div class="form-group">
	                    <label class="col-lg-2 control-label">监控器名称：</label>
	                    <label class="col-lg-4 control-label tl" data-id="monitorName"></label>
	                    <label class="col-lg-2 control-label">监控器类型：</label>
	                    <label class="col-lg-4 control-label tl" data-id="monitorType"></label>
	                </div>
	            </div>

	            <div id="base_info_asset_div">
	                <div class="form-group" style="height:0;padding:0"></div>
	                <div class="form-group">
	                    <label class="col-lg-2 control-label">被监控资产名称：</label>
	                    <label class="col-lg-4 control-label tl" data-id="assetName"></label>
	                    <label class="col-lg-2 control-label">资产类型：</label>
	                    <label class="col-lg-4 control-label tl" data-id="assetTypeName"></label>
	                </div>

	                <div class="form-group">
	                    <label class="col-lg-2 control-label">IP：</label>
	                    <label class="col-lg-4 control-label tl" data-id="mainIp"></label>
	                    <label class="col-lg-2 control-label">管控域：</label>
	                    <label class="col-lg-4 control-label tl" data-id="securityDomainName"></label>
	                </div>

	                <div class="form-group">
	                    <label class="col-lg-2 control-label">操作系统：</label>
	                    <label class="col-lg-4 control-label tl" data-id="osTypeName"></label>
	                    <label class="col-lg-2 control-label" style="display: none;">物理位置：</label>
	                    <label class="col-lg-4 control-label tl" data-id="locationCbName" style="display: none;"></label>
	                </div>

	                <div class="form-group">
	                    <label class="col-lg-2 control-label">数据库版本：</label>
	                    <label class="col-lg-4 control-label tl" data-id="version"></label>
	                    <label class="col-lg-2 control-label"></label>
	                    <label class="col-lg-4 control-label tl"></label>
	                </div>
	            </div>
	        </form>
		</div>
	</div>
	
	<!-- 实例 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>实例</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="instance_sel"></select>
			</div>
		</div>
		<div class="m-panel-body base-info-div">
			<form class="bs-example form-horizontal xs-form">
	            <div id="instance_div">
	                <div id="instance_info_div">
	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">控制文件类型：</label>
	                        <label class="col-lg-4 control-label tl" data-id="controlfileType"></label>
	                        <label class="col-lg-2 control-label"></label>
	                        <label class="col-lg-4 control-label tl"></label>
	                    </div>

	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">数据库创建时间：</label>
	                        <label class="col-lg-4 control-label tl" data-id="created"></label>
	                        <label class="col-lg-2 control-label">日志模式：</label>
	                        <label class="col-lg-4 control-label tl" data-id="logMode"></label>
	                    </div>


	                    <div class="form-group">
	                        <label class="col-lg-2 control-label" >访问模式：</label>
	                        <label class="col-lg-4 control-label tl" data-id="openMode"></label>
	                        <label class="col-lg-2 control-label">获取时间：</label>
	                        <label class="col-lg-4 control-label tl" data-id="enterDate"></label>
	                    </div>

	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">连接数：</label>
	                        <label class="col-lg-4 control-label tl" data-id="sessionCount"></label>
	                        <label class="col-lg-2 control-label">进程数：</label>
	                        <label class="col-lg-4 control-label tl" data-id="processCount"></label>
	                    </div>

	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">密码过期时间：</label>
	                        <label class="col-lg-4 control-label tl" data-id="expiryDate"></label>
	                        <label class="col-lg-2 control-label">数据库状态：</label>
	                        <label class="col-lg-4 control-label tl" data-id="databaseStatus"></label>
	                    </div>
	                </div>

	                <div id="component_div">
	                    <div class="form-group" style="height:0"></div>
	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">实例启动时间：</label>
	                        <label class="col-lg-4 control-label tl" data-id="startTime"></label>
	                        <label class="col-lg-2 control-label">实例状态：</label>
	                        <label class="col-lg-4 control-label tl" data-id="status"></label>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">是否并行服务器：</label>
	                        <label class="col-lg-4 control-label tl" data-id="parallevl"></label>
	                        <label class="col-lg-2 control-label">实例打开重做线：</label>
	                        <label class="col-lg-4 control-label tl" data-id="thread"></label>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-2 control-label">是否归档：</label>
	                        <label class="col-lg-4 control-label tl" data-id="archiver"></label>
	                        <label class="col-lg-2 control-label">登陆方式：</label>
	                        <label class="col-lg-4 control-label tl" data-id="logins"></label>
	                    </div>
	                </div>
	            </div>
	        </form>
		</div>
	</div>

	<!-- 表空间 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>表空间</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="space_instance_sel"></select>
			</div>
		</div>
		<div class="m-panel-body">
			<div class="prel">
				<div style="height:100px" class="monitor-chart" id="table_space_chart"></div>
		        <div class="table_div" id="table_space_div" style="height:300px"></div>
			</div>
		</div>
	</div>

	<!-- 会话信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>会话信息</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="session_instance_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="session_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="session_info_list">会话信息</li>
					<li data-action="wait_session_list">等待会话</li>
				</ul>
			</div>
			<div class="table-div" id="session_info_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 回退块/内存块 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>回退块/内存块</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="rollback_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="rollback_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="rollback_list">回退块</li>
					<li data-action="memory_list">内存块</li>
				</ul>
			</div>
			<div class="table-div" id="rollback_table" style="height:300px"></div>
		</div>
	</div>

	<!-- SGA/PGA -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>SGA/PGA</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="sga_pga_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="sga_pga_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="sga_info_list">SGA信息</li>
					<li data-action="sga_variable_list">SGA Variable信息</li>
					<li data-action="redo_log_list">重做日志缓冲区命中率</li>
					<li data-action="pga_config_list">PGA配置</li>
				</ul>
			</div>
			<div class="table-div" id="sga_pga_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 性能信息 -->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>性能信息</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="perform_info_sel"></select>
			</div>
		</div>
		<div class="m-panel-body base-info-div">
			<div class="m-panel-body-card" id="perform_info_div">
				<ul>
					<li class="active" data-action="counter_info">计数器信息</li>
					<li data-action="cpu_use_info">CPU使用信息</li>
				</ul>
			</div>
			<div>
				<form class="bs-example form-horizontal xs-form">
					<div id="counter_div">
						<div class="form-group">
			                <label class="col-lg-3 control-label">会话数：</label>
			                <label class="col-lg-3 control-label tl" data-id="sessionCount"></label>
			                <label class="col-lg-3 control-label">游标数：</label>
			                <label class="col-lg-3 control-label tl" data-id="cursorCount"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">回滚事务数：</label>
			                <label class="col-lg-3 control-label tl" data-id="rollbacks"></label>
			                <label class="col-lg-3 control-label">提交事务数：</label>
			                <label class="col-lg-3 control-label tl" data-id="commits"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">每秒提交事务数：</label>
			                <label class="col-lg-3 control-label tl" data-id="commitsPerSec"></label>
			                <label class="col-lg-3 control-label">每秒回滚事务数：</label>
			                <label class="col-lg-3 control-label tl" data-id="rollbacksPerSec"></label>
			            </div>

						<div class="form-group">
			                <label class="col-lg-3 control-label">垃圾记录数：</label>
			                <label class="col-lg-3 control-label tl" data-id="recycleCount"></label>
			                <label class="col-lg-3 control-label">获取时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="updateDate"></label>
			            </div>
					</div>
					<div id="cpu_use_div" style="display: none;">
						<div class="form-group">
			                <label class="col-lg-3 control-label">空闲cpu资源百分比：</label>
			                <label class="col-lg-3 control-label tl" data-id="idleCpuRatio"></label>
			                <label class="col-lg-3 control-label">平均等待时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="avgWaitTime"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">IO操作占用cpu资源百分比：</label>
			                <label class="col-lg-3 control-label tl" data-id="ioCpuRatio"></label>
			                <label class="col-lg-3 control-label">运算占用cpu资源百分比：</label>
			                <label class="col-lg-3 control-label tl" data-id="operCpuRatio"></label>
			            </div>

			            <div class="form-group">
			                <label class="col-lg-3 control-label">cpu运算时间比：</label>
			                <label class="col-lg-3 control-label tl" data-id="cpuRatio"></label>
			                <label class="col-lg-3 control-label">获取时间：</label>
			                <label class="col-lg-3 control-label tl" data-id="updateDate"></label>
			            </div>
					</div>
		        </form>
			</div>
			
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="buffer_poor_list">缓冲区信息</li>
				</ul>
			</div>
			<div class="table-div" id="buffer_poor_table" style="height:300px"></div>
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="BPHR_chart">缓冲区命中率</li>
				</ul>
			</div>
			<div id="BPHR_chart" class="monitor-chart" style="height:210px"></div>
		</div>
	</div>

	<!-- 锁信息-->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>锁信息</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="lock_info_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="lock_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="lock_info_list">全局锁信息</li>
					<li data-action="block_lock_info_list">全局阻塞锁信息</li>
				</ul>
			</div>
			<div class="table-div" id="lock_info_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 慢SQL信息-->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>慢SQL信息</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="sql_info_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="sql_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="total_cost_list">总消耗(TOP 10)</li>
					<li data-action="cpu_cost_list">CPU消耗(TOP 10)</li>
					<li data-action="read_cost_list">磁盘读取消耗(TOP 10)</li>
				</ul>
			</div>
			<div class="table-div" id="sql_info_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 文件信息-->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>文件信息</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="file_info_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="file_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="database_file_list">数据库文件</li>
					<li data-action="reform_log_list">重做日志</li>
					<li data-action="invalid_list">无效对象</li>
				</ul>
			</div>
			<div class="table-div" id="file_info_table" style="height:300px"></div>
		</div>
	</div>

	<!-- 用户信息-->
	<div class="m-panel">
		<div class="m-panel-title">
			<span>用户信息</span>
		</div>
		<div class="m-panel-sel">
			<div>实例：</div>
			<div>
				<select class="form-control input-sm" data-type="select" id="user_info_sel"></select>
			</div>
		</div>
		<div class="m-panel-body" id="user_info_div">
			<div class="m-panel-body-card">
				<ul>
					<li class="active" data-action="user_access_list">用户访问信息</li>
					<li data-action="user_work_list">用户作业信息</li>
				</ul>
			</div>
			<div class="table-div" id="user_info_table" style="height:300px"></div>
		</div>
	</div>
</div>

<div class="monitor-tab-div" data-type="event"></div>

<script type="text/javascript">
$(document).ready(function (){
require([index_web_app_name + '/js/plugin/monitor/catagory/oracle.js'] ,function (oracle){

var urlParamObj = index_query_param_get()

view_init()

event_init()

index_form_init($("body"))

function view_init()
{
	urlParamObj.time = $("#query_time_label").text()
	//oracle.base_info_render(urlParamObj)
	oracle.instance_sel(urlParamObj)
	session_info()
	rollback_info()
	sga_pga_info()
	perform_info()
	lock_info()
	sql_info()
	file_info()
	user_info()
}

function event_init()
{
	$("#instance_sel").change(function (){
		oracle.instance_info_render()
	})

	$("#space_instance_sel").change(function (){
		oracle.table_space_list()
		oracle.table_space_chart()
	})

	$("#session_instance_sel").change(function (){
		var listname
		$("#session_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})

	$("#rollback_sel").change(function (){
		var listname
		$("#rollback_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})

	$("#sga_pga_sel").change(function (){
		var listname
		$("#sga_pga_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})
	$("#perform_info_sel").change(function (){
		var listname
		$("#perform_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
		oracle.buffer_poor_list()
		oracle.BPHR_chart()
	})

	$("#lock_info_sel").change(function (){
		var listname
		$("#lock_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})

	$("#sql_info_sel").change(function (){
		var listname
		$("#sql_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})

	$("#file_info_sel").change(function (){
		var listname
		$("#file_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})

	$("#user_info_sel").change(function (){
		var listname
		$("#user_info_div").find("li").each(function(){
			if($(this).attr("class") == "active"){
				listname = $(this).attr("data-action")
			}
		})
		oracle[listname]()
	})
}

window.index_monitor_init = function ()
{
	view_init()
}

function session_info(){
	var el_ul = $("#session_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

function rollback_info(){
	var el_ul = $("#rollback_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

function sga_pga_info(){
	var el_ul = $("#sga_pga_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

function perform_info(){
	var el_ul = $("#perform_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		if($(this).attr("data-action") == "counter_info"){
			$("#counter_div").show()
			$("#cpu_use_div").hide()
		}else{
			$("#counter_div").hide()
			$("#cpu_use_div").show()
		}
		oracle[$(this).attr("data-action")]()
	})
}

function lock_info(){
	var el_ul = $("#lock_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

function sql_info(){
	var el_ul = $("#sql_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

function file_info(){
	var el_ul = $("#file_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

function user_info(){
	var el_ul = $("#user_info_div").find("ul")
	el_ul.find("li").unbind("click")
	el_ul.find("li").removeClass("active")
	el_ul.find("li").eq(0).addClass("active")
	el_ul.find("li").click(function (){
		$(this).siblings().removeClass("active")
		$(this).addClass("active")
		oracle[$(this).attr("data-action")]()
	})
}

});
});
</script>